/**
 * rederProps模式:数据和视图分离
 * 步骤：
 * 1. 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态  2. 操作状态的方法）
 * 2. 将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部
 * 3. 使用 props.render() 的返回值作为要渲染的内容
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

class RederProps extends Component {
    // 定义对外的API：需要传递的数据
    static propTypes = {
        render: PropTypes.func.isRequired
    }
    state = {
        x: 0,
        y: 0
    }
    componentDidMount() {
        // 监听鼠标移动事件
        window.addEventListener('mousemove', this.hMove)
    }
    // 清理工作
    componentWillUnmount() {
        // 事件解绑
        window.removeEventListener('mousemove', this.hMove)
    }
    // 鼠标移动事件处理函数
    hMove = (e) => {
        // console.log(e.pageX, e.pageY)
        this.setState({
            x: e.pageX,
            y: e.pageY
        })
    }
    // 模版=》由使用组件者=》传入
    render() {
        return this.props.render(this.state)
    }
}
// 测试调用
class Test extends Component {
    render() {
        return (
            <div>
                <RederProps render={(data) => {
                    // console.log(data)
                    return <h2 className="color">鼠标移动位置信息:{data.x}--{data.y}：</h2>
                }} />
            </div>
        )
    }
}

export default Test